<template>
  <div class="item-box">
    <block-header icon="/static/icon/guiji.png" title="轨迹" @filter="filter" :isFilter="isFilter">
      <div class="filter_box" slot="filterBox" v-if="isShowfilter">
      <div class="filter_time">时间区域</div>
      <div class="filter_btn">
        <mt-button size="small" class="filter_btns" @click="getTimes(7)">7天</mt-button>
        <mt-button size="small" class="filter_btns" @click="getTimes(30)">一个月</mt-button>
        <mt-button size="small" class="filter_btns" @click="getTimes(180)">半年</mt-button>
      </div>
      <div class="filter_date">
        <mt-field type="date" class="data_btn" v-model="start"></mt-field>
        <mt-field type="date" class="data_btn" v-model="end"></mt-field>
      </div>
      <footer>
        <div class="button" @click="reset">重置</div>
        <div class="button" @click="done">完成</div>
      </footer>
    </div>
    </block-header>
    
    <slot name="title"></slot>
    <slot name="image"></slot>
    <axis-y :data="trackData" v-if="trackData.length > 0" :more="more" @nodeClick="axisClick"></axis-y>
    <span class="tip-null" v-else>暂无数据</span>
    <div class="hidden" v-if="trackData.length > 9">
      <p class="checkMore" @click="checkMore">查看更多<span class="icon iconfont icon-down-trangle margin-check"></span></p>
    </div>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'
  import AxisY from '../../components/axis-y'
  import date from '../../utils/date'

  export default {
    name: 'track-block',
    components: {
      BlockHeader,
      AxisY
    },
    props: {
      trackData: {
        type: Array,
        default() {
          return []
        }
      },
      more: {
        type: Boolean,
        default: false
      },
      isFilter: {
        type: Boolean,
        default: false
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
        isShowfilter: false,
        start: '',
        end: ''
      }
    },
    methods: {
      checkMore() {
        this.$emit('checkMoreData')
        this.$router.push('allRecord')
      },
      axisClick(event, item, index, targetNode) {
        this.$emit('axisClick', event, item, index, targetNode)
        switch(item.zylx) {
          case 'LG':
            this.$router.push('liveDetail')
            break;
          case 'WB':
            this.$router.push('onlineDetail')
            break;
          case 'TL':
            this.$router.push('vehicle')
            break;
          case 'JCG':
            this.$router.push('exitEntry')
            break;
          default:
        }
      },
      filter(start, end) {
        this.isShowfilter = this.isShowfilter !== true
        this.$emit('traceFilter', start, end)
      },
      getTimes(time) {
        this.filter(date(new Date(), 'yyyyMMdd', {d: -time}), date(new Date(), 'yyyyMMdd'))
        this.isShowfilter = false
      },
      done() {
        this.filter(date(this.start, 'yyyyMMdd'), date(this.end, 'yyyyMMdd'))
        this.isShowfilter = false
      },
      reset() {
        this.start = ''
        this.end = ''
      }
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped>
.hidden {
  height: 2.5rem;
  border-top: .5px solid #F3F3F3;
  text-align: center;
  margin-top: 1rem;
}
.checkMore {
  margin-top: 0.5rem;
}
.margin-check {
  margin-left:1rem;
}
/*弹出*/
footer {
  display: flex;
  text-align: center;
}
.button {
  flex-grow: 1;
  color: #fff;
  background: rgba(255, 153, 51, 1);
  flex-basis: 0;
}
.button:first-child {
  margin-right: .2rem;
}
.filter_btn {
  display: flex;
  text-align: center;
}
.filter_btns {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 1rem;
  margin-bottom: 1rem
}
.filter_btns:last-child {
  margin-right: 1rem;
}
.filter_time {
  margin-left: 1rem;
}
.filter_date {
  display: flex;
  text-align: center;
}
.date_btn {
  flex-grow: 1;
  flex-basis: 0;
}
</style>
